---
title: 'Introduction'
---

## Migrations

<CardGroup cols={2}>

<Card
  title="React v18 -> v19"
  href="/guides/migrations/react-18-19"
  icon={
    <>
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="28" viewBox="0 0 32 28" fill="none">
<g clipPath="url(#clip0_1_6)">
<path d="M15.7353 16.805C17.2845 16.805 18.5403 15.5492 18.5403 14C18.5403 12.4508 17.2845 11.195 15.7353 11.195C14.1861 11.195 12.9303 12.4508 12.9303 14C12.9303 15.5492 14.1861 16.805 15.7353 16.805Z" fill="#61DAFB"/>
<path d="M15.7354 19.7468C24.048 19.7468 30.7866 17.1739 30.7866 14C30.7866 10.8261 24.048 8.25317 15.7354 8.25317C7.42286 8.25317 0.684204 10.8261 0.684204 14C0.684204 17.1739 7.42286 19.7468 15.7354 19.7468Z" stroke="#61DAFB"/>
<path d="M10.7585 16.8734C14.9147 24.0723 20.5123 28.6217 23.261 27.0347C26.0096 25.4478 24.8685 18.3255 20.7122 11.1266C16.556 3.9277 10.9584 -0.621672 8.20975 0.965269C5.46109 2.55221 6.60218 9.67453 10.7585 16.8734Z" stroke="#61DAFB"/>
<path d="M10.7585 11.1266C6.60225 18.3255 5.46115 25.4478 8.20982 27.0347C10.9585 28.6217 16.556 24.0723 20.7123 16.8734C24.8686 9.67453 26.0097 2.55221 23.261 0.965273C20.5124 -0.621668 14.9148 3.92771 10.7585 11.1266Z" stroke="#61DAFB"/>
</g>
<defs>
<clipPath id="clip0_1_6">
<rect width="31.4707" height="28" fill="white"/>
</clipPath>
</defs>
</svg>
    </>
  }
></Card>

<Card
  title="Nuxt 3 -> 4"
  href="/guides/migrations/nuxt-3-4"
  icon={
    <>
      <svg width="32" height="22" viewBox="0 0 34 25" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M18.9648 23.4763H31.0874C31.4742 23.4763 31.8445 23.34 32.1795 23.1478C32.5145 22.9556 32.8599 22.7142 33.0532 22.3812C33.2465 22.0483 33.381 21.6705 33.3808 21.2861C33.3807 20.9017 33.2468 20.524 33.0532 20.1912L24.8623 6.06514C24.6689 5.73221 24.4327 5.49078 24.0978 5.29855C23.7628 5.1064 23.2832 4.97004 22.8965 4.97004C22.5097 4.97004 22.1393 5.1064 21.8044 5.29855C21.4694 5.49078 21.2332 5.73221 21.0398 6.06514L18.9648 9.67877L14.8147 2.67022C14.6212 2.33737 14.3853 1.98662 14.0503 1.79447C13.7152 1.60225 13.345 1.57544 12.9582 1.57544C12.5714 1.57544 12.2011 1.60225 11.866 1.79447C11.531 1.98662 11.1859 2.33737 10.9924 2.67022L0.835615 20.1912C0.641977 20.524 0.617358 20.9017 0.617188 21.2861C0.617018 21.6705 0.642271 22.0482 0.835615 22.3812C1.02896 22.7141 1.3743 22.9556 1.70931 23.1478C2.04432 23.34 2.41458 23.4763 2.80143 23.4763H10.4463C13.4754 23.4763 15.6803 22.1138 17.2175 19.5341L20.9306 13.0734L22.8965 9.67877L28.9031 19.9721H20.9306L18.9648 23.4763ZM10.3371 19.9721H4.98565L12.9582 6.17461L16.999 13.0734L14.3224 17.7519C13.3016 19.4257 12.1377 19.9721 10.3371 19.9721Z" fill="#00DC82"/>
      </svg>
    </>
  }
></Card>

<Card
  title="pnpm catalogs migration"
  href="/guides/migrations/pnpm-catalog"
  icon={
    <>
    <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_6_13)">
    <path d="M24.5429 7.77394H16.9214V0.152466H24.5429V7.77394Z" fill="#F9AD00"/>
    <path d="M16.1578 7.77394H8.53629V0.152466H16.1578V7.77394Z" fill="#F9AD00"/>
    <path d="M7.77412 7.77394H0.152649V0.152466H7.77412V7.77394Z" fill="#F9AD00"/>
    <path d="M24.5429 16.1576H16.9214V8.53613H24.5429V16.1576Z" fill="#F9AD00"/>
    <path d="M16.1578 16.1576H8.53629V8.53613H16.1578V16.1576Z" fill="#4E4E4E"/>
    <path d="M16.1578 24.5412H8.53629V16.9197H16.1578V24.5412Z" fill="#4E4E4E"/>
    <path d="M24.5429 24.5412H16.9214V16.9197H24.5429V24.5412Z" fill="#4E4E4E"/>
    <path d="M7.77412 24.5412H0.152649V16.9197H7.77412V24.5412Z" fill="#4E4E4E"/>
    </g>
    <defs>
    <clipPath id="clip0_6_13">
    <rect width="25" height="24.9984" fill="white"/>
    </clipPath>
    </defs>
    </svg>
    </>
  }
></Card>

<Card
  title="MSW v1 -> v2"
  href="/guides/migrations/msw-v1-v2"
  icon={
    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
<g clipPath="url(#clip0_2_56)">
<path d="M22.75 0H5.25C2.35051 0 0 2.35051 0 5.25V22.75C0 25.6495 2.35051 28 5.25 28H22.75C25.6495 28 28 25.6495 28 22.75V5.25C28 2.35051 25.6495 0 22.75 0Z" fill="black"/>
<path opacity="0.48" fillRule="evenodd" clipRule="evenodd" d="M18.9679 16.9832C19.3987 17.4616 19.5948 18.0695 19.5636 18.6654C19.5324 19.2613 19.2738 19.8453 18.7953 20.2761C18.3665 20.6622 17.8097 20.8756 17.2327 20.875L7.18072 20.8646C6.98047 20.8644 6.79927 20.7831 6.66817 20.6517C6.53708 20.5203 6.4561 20.339 6.45631 20.1387L7.50061 10.0664C7.56726 9.42598 7.88717 8.87321 8.35052 8.4972C8.81387 8.12119 9.42067 7.92195 10.0611 7.98859C10.635 8.04832 11.1664 8.31873 11.5525 8.74754L18.9679 16.9832Z" stroke="#FF3333" strokeWidth="4"/>
<path fillRule="evenodd" clipRule="evenodd" d="M6.61448 8.33163C6.48049 8.18281 6.4195 7.99378 6.42922 7.80845C6.43893 7.62312 6.51934 7.4415 6.66815 7.30751C6.80152 7.18743 6.97467 7.12106 7.15413 7.12125L20.8194 7.13534C21.0196 7.13554 21.2008 7.2169 21.3319 7.34826C21.463 7.47962 21.544 7.661 21.5438 7.86124L20.1255 21.5274C20.1048 21.7266 20.0053 21.8985 19.8612 22.0155C19.7171 22.1324 19.5284 22.1944 19.3292 22.1736C19.1507 22.1551 18.9854 22.071 18.8654 21.9376L6.61448 8.33163Z" stroke="#FF6A33" strokeWidth="4"/>
</g>
<defs>
<clipPath id="clip0_2_56">
<rect width="28" height="28" fill="white"/>
</clipPath>
</defs>
</svg>
}

> </Card>

<Card
  title="Radix Vue -> Reka UI (Radix Vue v2)"
  href="https://reka-ui.com/docs/guides/migration"
  icon={
    <svg width="32" height="32" viewBox="0 0 290 290" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M226.269 52.4044L226.274 52.4067C237.406 58.2619 245.614 66.3008 250.94 76.5218C256.285 86.7776 258.969 98.4614 258.969 111.596C258.969 124.732 256.285 136.34 250.943 146.446C245.618 156.521 237.447 164.451 226.389 170.234C221.59 172.712 219.355 178.881 222.459 183.542L257.922 236.789C261.773 242.571 257.628 250.311 250.681 250.311H196.906C193.806 250.311 190.939 248.661 189.382 245.98L79.3991 56.5686C76.0313 50.7687 80.2159 43.5 86.9227 43.5H183.394C200.888 43.5 215.161 46.4896 226.269 52.4044Z" fill="url(#paint0_linear_30_25)" stroke="url(#paint1_linear_30_25)" stroke-width="1.93333"/>
<path d="M116.722 247.228C113.004 253.687 103.684 253.687 99.9661 247.228L26.2042 119.085C22.4947 112.64 27.1462 104.596 34.5821 104.596L182.106 104.596C189.542 104.596 194.193 112.64 190.484 119.085L116.722 247.228Z" fill="url(#paint2_radial_30_25)"/>
<path d="M116.722 247.228C113.004 253.687 103.684 253.687 99.9661 247.228L26.2042 119.085C22.4947 112.64 27.1462 104.596 34.5821 104.596L182.106 104.596C189.542 104.596 194.193 112.64 190.484 119.085L116.722 247.228Z" fill="url(#paint3_radial_30_25)" fill-opacity="0.5"/>
<path d="M100.804 246.745L27.042 118.602C23.7034 112.802 27.8898 105.562 34.5821 105.562L182.106 105.562C188.798 105.562 192.985 112.802 189.646 118.602L115.884 246.745C112.538 252.558 104.15 252.558 100.804 246.745Z" fill="url(#paint4_radial_30_25)" fill-opacity="0.5" stroke="url(#paint5_linear_30_25)" stroke-width="1.93333" stroke-linejoin="round"/>
<defs>
<linearGradient id="paint0_linear_30_25" x1="241.666" y1="264.867" x2="88.9331" y2="7.73334" gradientUnits="userSpaceOnUse">
<stop stop-color="#00996C"/>
<stop offset="1" stop-color="#7AFFD8"/>
</linearGradient>
<linearGradient id="paint1_linear_30_25" x1="192.366" y1="289.033" x2="233.933" y2="42.5333" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.56"/>
<stop offset="0.494792" stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<radialGradient id="paint2_radial_30_25" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(185.6 110.2) rotate(147.858) scale(129.006 128.619)">
<stop offset="0.48614" stop-color="#00C58A"/>
<stop offset="1" stop-color="white" stop-opacity="0.21"/>
</radialGradient>
<radialGradient id="paint3_radial_30_25" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(108.266 160.467) rotate(90) scale(191.4 190.827)">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</radialGradient>
<radialGradient id="paint4_radial_30_25" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(108.266 181.733) rotate(-90) scale(129.533 129.145)">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</radialGradient>
<linearGradient id="paint5_linear_30_25" x1="105.366" y1="105.367" x2="105.366" y2="261" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.6"/>
<stop offset="0.494792" stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white" stop-opacity="0.38"/>
</linearGradient>
</defs>
</svg>
}

> </Card>

<Card
  title="Fastify v3 -> v4"
  href="https://fastify.dev/docs/latest/Guides/Migration-Guide-V4/"
  icon={
    <svg height="auto" preserveAspectRatio="xMidYMid" width="33" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 167.509"><path d="M247.942 23.314L256 2.444l-.35-1.293-79.717 21.003C184.433 9.86 181.513 0 181.513 0s-25.457 16.257-44.709 15.832c-19.251-.426-25.457-5.564-54.977 3.853-29.52 9.41-37.86 38.295-46.419 44.5S0 90.603 0 90.603l.058.359 24.207-7.707s-6.64 6.255-20.745 25.265l-.659-.609.025.134s11.336 17.324 22.463 14.121c1.118-.325 2.377-.859 3.753-1.56 4.48 2.495 10.327 4.947 16.783 5.622 0 0-4.37-5.08-8.016-10.86.984-.634 1.994-1.293 3.02-1.96l-.476.334 9.217 3.386-1.017-8.666c.033-.017.058-.042.091-.059l9.059 3.328-1.126-7.882a76.868 76.868 0 0 1 3.436-1.693l9.443-35.717 39.045-26.634-3.103 7.808c-7.916 19.468-22.78 24.064-22.78 24.064l-6.206 2.352c-4.612 5.455-6.556 6.798-8.14 25.107 3.72-.934 7.273-1.16 10.492-.292 16.683 4.496 22.463 24.599 17.967 30.162-1.126 1.393-3.803 3.77-7.181 6.565h-6.773l-.092 5.488c-.234.184-.467.359-.693.542h-6.89l-.083 5.355c-.609.468-1.218.918-1.801 1.36-6.473.133-14.673-5.514-14.673-5.514 0 5.139 4.28 13.046 4.28 13.046s.283-.133.758-.367c-.417.309-.65.476-.65.476s17.324 11.552 28.235 7.273c9.7-3.804 34.816-23.606 56.495-32.981l65.603-17.283 8.65-22.413-49.997 13.17V83.597l58.664-15.457 8.65-22.413-67.297 17.734V43.324z"/></svg>
}

> </Card>

<Card
  title="Meteor v2 -> v3"
  href="https://v3-migration-docs.meteor.com/"
  icon={
    <svg width="32" height="32" viewBox="0 0 256 251" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><g fill="#DF4F4F"><path d="M.439.438L219.3 232.266s7.457 5.259 13.158-.877c5.702-6.135 1.316-12.27 1.316-12.27L.44.439zM69.738 22.35l166.668 179.677s7.456 5.26 13.158-.876c5.702-6.135 1.316-12.27 1.316-12.27L69.738 22.35zM21.053 69.242L187.72 248.919s7.456 5.259 13.158-.877c5.702-6.135 1.316-12.27 1.316-12.27L21.053 69.242zM128.32 41.194l116.442 125.53s5.21 3.674 9.193-.612c3.983-4.287.919-8.573.919-8.573L128.321 41.194zM37.092 123.583l116.441 125.53s5.21 3.674 9.193-.613c3.983-4.286.919-8.572.919-8.572L37.092 123.583zM188.16 68.365l52.775 57.067s2.577 1.722 4.547-.287c1.97-2.008.455-4.017.455-4.017L188.16 68.365zM66.229 181.43l52.775 57.067s2.577 1.722 4.547-.286c1.97-2.009.455-4.017.455-4.017L66.229 181.43z"/></g></svg>
}

> </Card>

<Card title="Valibot v0.31.0 upgrade" href="https://valibot.dev/guides/migrate-to-v0.31.0/" icon={
<svg viewBox="0 0 48 48" role="img" aria-label="Valibot icon" class="mr-2 h-8 shrink-0 md:h-9 lg:mr-3 lg:h-10" q:key="ER_0"><defs><linearGradient id="nCrZ" x1=".41" x2="0" y1=".26" y2=".93" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#eab308"></stop><stop offset="1" stop-color="#ca8a04"></stop></linearGradient><linearGradient id="jgAy" x1=".34" x2=".66" y1=".02" y2=".97" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#fde68a"></stop><stop offset="1" stop-color="#fbbf24"></stop></linearGradient><linearGradient id="YpWK" x2="1" y1=".5" y2=".5" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#7dd3fc"></stop><stop offset="1" stop-color="#0ea5e9"></stop></linearGradient></defs><path fill="url(#nCrZ)" d="M629.38 987.02c-6.26 0-11.17 5.13-11.43 11.86l-.24 8.95c-.37 7.37 6.75 9.89 11.9 9.89Z" transform="translate(-615.34 -978.37)"></path><path fill="url(#jgAy)" d="M8.68 0h21.3a9 9 0 0 1 9.23 8.75l.58 12.73c.07 6.31-4.51 8.9-9.8 8.94l-21.31.27c-5.49.04-8.78-4.1-8.68-9.21L.35 8.75C.7 3.15 3.13.1 8.69 0Z" transform="translate(5.85 8.65)"></path><path fill="#111827" d="M15.73 9.63h19.98a8.4 8.4 0 0 1 8.65 8.14l.54 11.84c.06 5.88-4.23 8.28-9.19 8.32l-19.98.25c-5.14.04-8.24-3.81-8.14-8.57l.34-11.84c.31-5.21 2.59-8.04 7.8-8.14Z"></path><path fill="url(#YpWK)" d="M2.59 0A2.59 2.59 0 1 1 0 2.59 2.59 2.59 0 0 1 2.59 0Z" transform="translate(34.23 19.25)"></path><path fill="url(#YpWK)" d="M2.59 0A2.59 2.59 0 1 1 0 2.59 2.59 2.59 0 0 1 2.59 0Z" transform="translate(14.25 19.25)"></path></svg>
}></Card>

<Card title="Zod 3 -> 4" href="/guides/migrations/zod-3-4" icon={
  <>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="26"
    viewBox="0 0 32 26"
    fill="none"
  >
    <path
      fill="#3068B7"
      fillRule="evenodd"
      d="M24.885.59H6.994L.457 7.149l14.84 18.021 1.184-1.34 14.69-16.62L24.885.592Zm-.654 1.545 4.856 5.113L15.34 22.802 2.529 7.248l5.097-5.113H24.23Z"
      clipRule="evenodd"
    />
    <path fill="#274D82" d="M21.79 15.504H9.328v1.985H21.79v-1.985Z" />
    <path
      fill="#274D82"
      d="M20.337 17.15h-9.653v1.984h9.653V17.15ZM22.716 14.99h-5.165v.558h5.165v-.559ZM25.85 2.552 7.398 13.295l1.856 3.24L27.705 5.793l-1.855-3.24ZM14.739 1.47 2.914 8.354l.381.666L15.12 2.135l-.381-.665Z"
    />
    <path
      fill="#274D82"
      d="M14.352 1.018 2.527 7.902l.381.666 11.825-6.884-.38-.666Z"
    />
    <path
      fill="#274D82"
      d="M13.973.665 2.148 7.549l.382.666 11.824-6.884-.38-.666ZM15.798 1.47 3.293 8.75l.3.524 12.505-7.28-.3-.525Z"
    />
    <path
      fill="#274D82"
      d="M16.579 1.61 3.594 9.17l.3.525 12.985-7.56-.3-.524Z"
    />
    <path
      fill="#274D82"
      d="M17.698 1.47 3.812 9.554l.382.665 13.885-8.084-.38-.665ZM25.223 2.323l-4.172 2.429 1.233 2.154 4.172-2.429-1.233-2.154Z"
    />
  </svg>
  </>
}></Card>

</CardGroup>
